<template>
   <!-- 商品组件 -->
    <!-- 根据接收的参数遍历 -->
     <!-- 点击跳转详情 -->
    <div class="goods" @click="router.push({path: '/product', query: {goodsId: props.goods.goods_id}})">
		<img :src="props.goods.goods_thumb" alt="" />
		<p class="van-ellipsis">{{props.goods.goods_name}}</p>
		<p class="van-ellipsis">{{props.goods.goods_desc}}</p>
		<p>￥{{props.goods.price}}</p>
	</div>
</template>

<script setup lang="ts">
    import { useRouter } from 'vue-router';
    import type {Goods} from '../../types';

    let router = useRouter();
    //接收参数
    let props = defineProps<{
		goods: Goods
	}>();

</script>

<style scoped lang="less">
    
    //商品卡牌样式
    .goods{
        margin-bottom: 10px;
		width: 48%;
		background:white;
		border: 1px solid #EAEAEA;
		border-radius: 8px;
		
		img{
			width: 100%; 
			border-radius: 2px;
			margin-bottom: 10px;
		}
		
		& p:nth-of-type(1){
			font-size: 14px;
			color: #333;
			padding: 0px 8px;
		}
		& p:nth-of-type(2){
			font-size: 12px;
			color: #999;
			padding: 8px 8px 20px;
		}
		& p:nth-of-type(3){
			font-size: 16px;
			color: #5881D8;
			padding: 0px 8px 20px;
		}
	}
</style>